<template>
	<view class="order-container">

		<!-- 订单状态标签页 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }"
				@click="switchTab(index)">
				{{ tab }}
			</view>
		</view>

		<!-- 最近常买的商品 -->
		<view class="recent-section">
			<view class="section-header">
				<text class="section-title">最近常买的商品</text>
				<text class="clear-btn">常购清单</text>
			</view>

			<!-- 订单列表 -->
			<view class="order-list">
				<view class="order-item" v-for="(order, index) in orderList" :key="index">
					<!-- 订单时间和状态 -->
					<view class="order-header">
						<text class="order-time">{{ order.createTime}}</text>
						<text class="order-status" v-if="order.orderStatus == 1">待支付</text>
						<text class="order-status" v-if="[2,3,4,7].includes(order.orderStatus)">待收货</text>
						<text class="order-status" v-if="order.orderStatus == 6">已取消</text>
						<text class="order-status" v-if="order.orderStatus == 5">已完成</text>
						<text class="order-status" v-if="order.orderStatus == 8">待评价</text>
					</view>

					<!-- 商品图片 -->
					<view class="product-images">
						<view class="product-image" v-for="(product, productIndex) in order.products"
							@click="orderitem(order.orderId)" :key="productIndpex">
							<image :src="product.imgSrc" mode="aspectFill"></image>
						</view>
					</view>

					<!-- 订单摘要 -->
					<view class="order-summary">
						<text class="product-count">共{{ order.productCount }}件商品</text>
						<text class="order-price">实付 ¥{{ order.actualAmount }}</text>
					</view>

					<!-- 操作按钮 -->
					<view class="action-buttons">
						<view class="btn delete-btn" @click="deleteOrder(order.orderId)">删除订单</view>
						<view class="btn buy-again-btn" @click="buyAgain(order.orderId)">再次购买</view>
						<view class="btn review-btn" v-if="[5,8].includes(order.orderStatus)"
							@click="reviewOrder(order.orderId)">
							评价一下</view>
						<!-- <view class="btn buy-again-btn" @click="orderitem(order.id)">asd</view> -->
					</view>
				</view>
			</view>
		</view>

	</view>
</template>




<script>
	import {
		request
	} from '@/utils/request'
	export default {
		data() {
			return {
				tabs: ['全部', '待支付', '待收货', '待评价'],
				currentTab: 0,
				orderList: [],
			}
		},
		methods: {
			orderitem(orderId) {

				// 跳转到订单详情页面
				uni.navigateTo({
					//带参数跳转
					url: '/pages/myOrders/orderItem?orderId=' + orderId
				})
			},
			async queryOrders(index) {
				try {
					const res = await request({
						url: "orderUser/queryOrder",
						method: 'POST',

						data: index




					});
					if (res.code == 200) {

						this.orderList = res.data;
					} else if (res.code == 201) {
						//跳转登录页
						uni.navigateTo({
							url: '/pages/login/login'
						})

					}


				} catch (error) {
					console.error("请求失败:", error);
				}
			},

			goBack() {
				uni.navigateBack()
			},
			switchTab(index) {
				this.currentTab = index
				// 这里可以根据选中的标签页加载不同状态的订单
				this.queryOrders(index)
			},

			async deleteOrder(orderId) {
				// 删除订单
				const res = await request({
					url: "orderUser/deleteOrder/" + orderId,
					//请求参数index
					method: 'GET',

				})

				if (res.code == 200) {
					uni.showToast({
							title: '删除成功',
							icon: 'success'
						}),
						// 重新获取订单数据
						this.queryOrders(this.currentTab)
				} else {
					uni.showToast({
						title: '删除失败',
						icon: 'error'
					})
				}
			},
			async buyAgain(orderId) {
				// 再次购买
				const res = await request({
					url: "shoppingCart/buyAgain/" + orderId,
					method: 'GET',
				})

				if (res.code == 200) {
					uni.showToast({
						title: '加入购物车成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '加入购物车失败',
						icon: 'error'
					})
				}
			},
			reviewOrder(orderId) {
				// 跳转到评价页面
				uni.navigateTo({
					url: '/pages/myOrders/commit?orderId=' + orderId

				})
			},
			clearRecentOrders() {
				// 清空最近常买的商品
				this.recentOrders = []
			}

		},
		onLoad(options) {
			this.currentTab = options.index || 0
			// 页面加载时获取订单数据
			this.queryOrders(this.currentTab)
		},

	}
</script>

<style lang="scss">
	.order-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		height: 44px;
		background-color: #ffffff;
		padding: 0 15px;
		position: relative;
	}

	.back-icon {
		font-size: 20px;
		color: #333;
	}

	.title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 16px;
		font-weight: 500;
	}

	.tabs {
		display: flex;
		background-color: #ffffff;
		border-bottom: 1px solid #eee;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 14px;
		color: #333;
	}

	.tab-item.active {
		color: #333;
		font-weight: bold;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 25%;
		width: 50%;
		height: 2px;
		background-color: #000;
	}

	.recent-section {
		margin-top: 10px;
		background-color: #ffffff;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	.section-title {
		font-size: 14px;
		color: #333;
	}

	.clear-btn {
		font-size: 12px;
		color: #ffffff;
		background-color: #333;
		padding: 4px 8px;
		border-radius: 12px;
	}

	.order-list {
		padding: 0 15px;
	}

	.order-item {
		padding: 15px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.order-time {
		font-size: 12px;
		color: #666;
	}

	.order-status {
		font-size: 12px;
		color: #666;
	}

	.product-imgs {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

	.img {
		/* font-size: 12px; */
		/* color: #666; */
		padding: 4px 10px;
		/* border: 1px solid #eee; */
		border-radius: 50%;
		margin-right: 8px;
		margin-bottom: 8px;
	}

	.order-summary {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 12px;
		color: #666;
	}

	.action-buttons {
		display: flex;
		justify-content: flex-end;
	}

	.btn {
		font-size: 12px;
		padding: 5px 10px;
		border: 1px solid #ddd;
		border-radius: 15px;
		margin-left: 8px;
	}

	.delete-btn {
		color: #666;
	}

	.buy-again-btn {
		color: #666;
	}

	.review-btn {
		color: #666;
	}

	.product-image {

		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 8px;
		margin-bottom: 8px;
		overflow: hidden;
		border: 1px solid #eee;
	}

	.product-image image {
		width: 100%;
		height: 100%;
	}

	.product-images {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
</style>